<template>
  <div class="main" @click="clickMe">
    <Search />
    <Swiper class="preview" /> 
    <Tabbar />
    <Hotlive />
    <Hotnews />
    <Casesharing />
    <!-- <div>
      <h3>ref函数在setup中创建响应式变量</h3>
      <p v-if="refVariable1">variable-01</p>
      <p v-if="refVariable2">variable-02</p>
    </div> -->

  </div>
</template>

<script>

// 引入 swiper 组件
import Swiper from './components/Swiper'
// 引入 tabbar 组件
import Tabbar from './components/Tabbar'
// 引入 search 组件
import Search from './components/Search'
// 引入 热门直播 组件 
import Hotlive from './components/Hotlive'
// 引入 热门资讯 组件
import Hotnews from './components/Hotnews'
// 引入 病例分享 组件
import Casesharing from './components/Casesharing'
// 引入 生命周期 函数
import { onBeforeMount, onMounted, reactive, ref } from 'vue'
// 引入 store
import store from '@/store'

export default {
  name: 'Home',
  components:{
    Swiper,
    Tabbar,
    Search,
    Hotlive,
    Hotnews,
    Casesharing,
  },
  data(){
    return {

    }
  }, 
  
 
  setup(props, context){  

    const clickMe = () => {   // 自定义一个方法 clickMe
      refVariable1 = false
      refVariable2.value = true
      
      
    }
    
    const data = reactive({   // reactive() 创建响应式对象
      headerImg: '../../assets/img/s2.webp'
    })
    
    let refVariable1 = true;  // ref函数 - 创建响应式变量
    let refVariable2 = ref(false);
    

    onBeforeMount(() => {  // setup内部生命周期函数 - onBeforeMount
      console.log("-onBeforeMount()-");
    })

    onMounted(() => {  
      console.log("-onMounted()-");
    })
    
    return { // 返回给外部组件使用
      clickMe,
      data,
      refVariable1,
      refVariable2
    }
  },

  computed(){

  },
  watch(){

  },
  methods:{

  },
  mounted(){
    
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: block;
  position: relative;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 0 0 2rem 0;
  overflow: hidden;
  .preview {
    margin: 0 auto;
    width: 32.5rem;
    height: 15rem;
    margin-top: .5rem;
  }
}
</style>
